<route lang="json5" type="page">
{
  layout: 'default',
  needLogin: true,
  style: {
    navigationBarTitleText: '充值管理',
    enablePullDownRefresh: true,
  },
}
</route>

<script setup lang="ts">
import { computed, ref } from 'vue'

// 当前选中的类型：电表 or 水表
const selectedType = ref<'electric' | 'water'>('electric')

// 分段器选项
const typeOptions = ref([
  { value: 'electric', label: '电表' },
  { value: 'water', label: '水表' },
])

// 搜索关键词
const searchKeyword = ref('')

// 当前选中的楼层id
const selectedFloorId = ref<number | null>(null)

// 建筑数据结构
const buildingData = ref([
  {
    id: 1,
    name: 'A区',
    children: [{
      id: 11,
      name: '1号楼',
      children: [{
        id: 111,
        name: '1层',
        devices: {
          electric: [
            {
              id: 1111,
              name: '501电表',
              reading: 660.69,
              balance: 67.55,
              floorId: 111,
            },
            {
              id: 1112,
              name: '502电表',
              reading: -60.69,
              balance: -10.55,
              floorId: 111,
            },
          ],
          water: [
            {
              id: 1113,
              name: '501水表',
              reading: 125.5,
              balance: 45.0,
              floorId: 111,
            },
            {
              id: 1114,
              name: '502水表',
              reading: 98.2,
              balance: 23.8,
              floorId: 111,
            },
          ],
        },
      }, {
        id: 112,
        name: '2层',
        devices: {
          electric: [
            {
              id: 1121,
              name: '503电表',
              reading: 660.69,
              balance: 67.55,
              floorId: 112,
            },
            {
              id: 1122,
              name: '504电表',
              reading: -60.69,
              balance: -10.55,
              floorId: 112,
            },
          ],
          water: [
            {
              id: 1123,
              name: '503水表',
              reading: 88.9,
              balance: 34.2,
              floorId: 112,
            },
          ],
        },
      }, {
        id: 113,
        name: '3层',
        devices: {
          electric: [
            {
              id: 1131,
              name: '505电表',
              reading: 445.32,
              balance: 89.12,
              floorId: 113,
            },
            {
              id: 1132,
              name: '506电表',
              reading: 523.88,
              balance: 45.67,
              floorId: 113,
            },
          ],
          water: [
            {
              id: 1133,
              name: '505水表',
              reading: 167.3,
              balance: 28.9,
              floorId: 113,
            },
          ],
        },
      }, {
        id: 114,
        name: '4层',
        devices: {
          electric: [
            {
              id: 1141,
              name: '507电表',
              reading: 712.45,
              balance: 123.56,
              floorId: 114,
            },
          ],
          water: [
            {
              id: 1142,
              name: '507水表',
              reading: 89.7,
              balance: 67.2,
              floorId: 114,
            },
          ],
        },
      }, {
        id: 115,
        name: '5层',
        devices: {
          electric: [
            {
              id: 1151,
              name: '508电表',
              reading: 398.77,
              balance: 56.44,
              floorId: 115,
            },
          ],
          water: [
            {
              id: 1152,
              name: '508水表',
              reading: 134.2,
              balance: 89.3,
              floorId: 115,
            },
          ],
        },
      }],
    }, {
      id: 12,
      name: '2号楼',
      children: [{
        id: 121,
        name: '1层',
        devices: {
          electric: [
            {
              id: 1211,
              name: '601电表',
              reading: 334.22,
              balance: 78.99,
              floorId: 121,
            },
          ],
          water: [
            {
              id: 1212,
              name: '601水表',
              reading: 67.8,
              balance: 45.1,
              floorId: 121,
            },
          ],
        },
      }],
    }, {
      id: 13,
      name: '3号楼',
      children: [{
        id: 131,
        name: '1层',
        devices: {
          electric: [
            {
              id: 1311,
              name: '701电表',
              reading: 589.33,
              balance: 234.67,
              floorId: 131,
            },
          ],
          water: [
            {
              id: 1312,
              name: '701水表',
              reading: 156.4,
              balance: 67.8,
              floorId: 131,
            },
          ],
        },
      }],
    }, {
      id: 14,
      name: '4号楼',
      children: [{
        id: 141,
        name: '1层',
        devices: {
          electric: [
            {
              id: 1411,
              name: '801电表',
              reading: 445.67,
              balance: 189.23,
              floorId: 141,
            },
          ],
          water: [
            {
              id: 1412,
              name: '801水表',
              reading: 234.1,
              balance: 123.4,
              floorId: 141,
            },
          ],
        },
      }],
    }],
  },
  {
    id: 2,
    name: 'B区',
    children: [{
      id: 21,
      name: '1号楼',
      children: [{
        id: 211,
        name: '1层',
        devices: {
          electric: [
            {
              id: 2111,
              name: '901电表',
              reading: 289.44,
              balance: 67.33,
              floorId: 211,
            },
          ],
          water: [
            {
              id: 2112,
              name: '901水表',
              reading: 78.9,
              balance: 34.5,
              floorId: 211,
            },
          ],
        },
      }],
    }],
  },
  {
    id: 3,
    name: 'C区',
    children: [{
      id: 31,
      name: '1号楼',
      children: [{
        id: 311,
        name: '1层',
        devices: {
          electric: [
            {
              id: 3111,
              name: '1001电表',
              reading: 567.89,
              balance: 145.67,
              floorId: 311,
            },
          ],
          water: [
            {
              id: 3112,
              name: '1001水表',
              reading: 123.7,
              balance: 89.2,
              floorId: 311,
            },
          ],
        },
      }],
    }],
  },
])

// 展开状态管理
const expandedNodes = ref<Set<number>>(new Set())

// 切换节点展开状态
function toggleExpand(nodeId: number) {
  if (expandedNodes.value.has(nodeId)) {
    expandedNodes.value.delete(nodeId)
  }
  else {
    expandedNodes.value.add(nodeId)
  }
}

// 选择楼层
function selectFloor(floorId: number) {
  selectedFloorId.value = floorId
}

// 切换设备类型
function switchType(type: 'electric' | 'water') {
  selectedType.value = type
}

// 处理分段器值变化
function handleTypeChange(value: 'electric' | 'water') {
  selectedType.value = value
}

// 获取当前选中楼层的设备列表
const currentDevices = computed(() => {
  if (!selectedFloorId.value)
    return []

  // 遍历所有楼层找到对应的设备
  for (const building of buildingData.value) {
    for (const floor of building.children) {
      for (const subFloor of floor.children) {
        if (subFloor.id === selectedFloorId.value) {
          return subFloor.devices[selectedType.value] || []
        }
      }
    }
  }
  return []
})

// 过滤后的设备列表
const filteredDevices = computed(() => {
  if (!searchKeyword.value)
    return currentDevices.value

  return currentDevices.value.filter(device =>
    device.name.toLowerCase().includes(searchKeyword.value.toLowerCase()),
  )
})

// 充值设备
function rechargeDevice(device: any) {
  uni.navigateTo({
    url: `/pages-admin/admin/recharge/recharge?deviceId=${device.id}`,
  })
}

// 初始化：默认选中第一个楼层
selectedFloorId.value = 115 // 5层
expandedNodes.value.add(1) // 展开A区
expandedNodes.value.add(11) // 展开1号楼
</script>

<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <wd-search v-model="searchKeyword" placeholder="请输入关键字" :show-action="false" hide-cancel />
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 左侧导航区域 -->
      <view class="left-nav">
        <!-- 电表/水表切换 -->
        <view class="type-selector">
          <wd-segmented :value="selectedType" :options="typeOptions" @update:value="handleTypeChange">
            <template #label="{ option }: { option: any }">
              <text class="tab-text">
                {{ option.label }}
              </text>
            </template>
          </wd-segmented>
        </view>

        <!-- 树形导航 -->
        <view class="nav-tree">
          <view v-for="building in buildingData" :key="building.id" class="nav-item">
            <!-- 楼栋节点 -->
            <view
              class="nav-node building-node" :class="{ expanded: expandedNodes.has(building.id) }"
              @click="toggleExpand(building.id)"
            >
              <view class="node-icon">
                <text class="icon-arrow" :class="{ rotate: expandedNodes.has(building.id) }">
                  ▶
                </text>
              </view>
              <text class="node-text">
                {{ building.name }}
              </text>
            </view>

            <!-- 楼层节点 -->
            <view v-if="expandedNodes.has(building.id)" class="children-nodes">
              <view v-for="floor in building.children" :key="floor.id" class="nav-item">
                <!-- 楼号节点 -->
                <view
                  class="nav-node floor-node" :class="{ expanded: expandedNodes.has(floor.id) }"
                  @click="toggleExpand(floor.id)"
                >
                  <view class="node-icon">
                    <text class="icon-arrow" :class="{ rotate: expandedNodes.has(floor.id) }">
                      ▶
                    </text>
                  </view>
                  <text class="node-text">
                    {{ floor.name }}
                  </text>
                </view>

                <!-- 层级节点 -->
                <view v-if="expandedNodes.has(floor.id)" class="children-nodes">
                  <view v-for="subFloor in floor.children" :key="subFloor.id" class="nav-item">
                    <view
                      class="nav-node sub-floor-node"
                      :class="{ active: selectedFloorId === subFloor.id }"
                      @click="selectFloor(subFloor.id)"
                    >
                      <view class="node-icon">
                        <text class="icon-dot">
                          ●
                        </text>
                      </view>
                      <text class="node-text">
                        {{ subFloor.name }}
                      </text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 右侧设备列表 -->
      <view class="right-content">
        <view v-if="filteredDevices.length === 0" class="empty-state">
          <text class="empty-text">
            {{ selectedFloorId ? '没有找到设备' : '请选择楼层' }}
          </text>
        </view>

        <view v-else class="device-list">
          <view
            v-for="device in filteredDevices" :key="device.id" class="device-item"
            :class="{ 'low-balance': device.balance < 0 }"
          >
            <!-- 设备读数显示 -->
            <view class="device-header">
              <span class="label">{{ selectedType === 'electric' ? '电度数' : '水度数' }}：</span>
              <span class="value">{{ device.reading }}{{ selectedType === 'electric' ? '度' : '吨' }}</span>
            </view>

            <!-- 设备详情 -->
            <view class="device-details">
              <view class="detail-row">
                <text class="detail-label">
                  {{ selectedType === 'electric' ? '电表名称' : '水表名称' }}：
                </text>
                <text class="detail-value">
                  {{ device.name }}
                </text>
              </view>
              <view class="detail-row">
                <text class="detail-label">
                  表余额：
                </text>
                <text class="detail-value" :class="{ negative: device.balance < 0 }">
                  {{ device.balance }}元
                </text>
              </view>
            </view>

            <!-- 充值按钮 -->
            <view class="device-actions">
              <wd-button
                type="primary" size="small" block
                @click="rechargeDevice(device)"
              >
                立即充值
              </wd-button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.search-bar {
  padding: 24rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
}

.main-content {
  display: flex;
  height: calc(100vh - 120rpx);
  background-color: #f5f5f5;
}

.left-nav {
  width: 300rpx;
  background-color: #ffffff;
  border-right: 1rpx solid #f0f0f0;
  display: flex;
  flex-direction: column;

  .type-selector {
    padding: 20rpx;
    background-color: #ffffff;
    border-bottom: 1rpx solid #e6e6e6;
  }

  .nav-tree {
    flex: 1;
    overflow-y: auto;
    padding: 20rpx 0;

    .nav-item {
      width: 100%;
    }

    .nav-node {
      display: flex;
      align-items: center;
      padding: 16rpx 24rpx;
      cursor: pointer;
      transition: background-color 0.2s;

      &:hover {
        background-color: #f5f5f5;
      }

      &.active {
        background-color: #e6f3ff;
        color: #1890ff;

        .node-text {
          color: #1890ff;
          font-weight: 500;
        }
      }

      .node-icon {
        width: 32rpx;
        height: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16rpx;

        .icon-arrow {
          font-size: 20rpx;
          color: #666;
          transition: transform 0.2s;

          &.rotate {
            transform: rotate(90deg);
          }
        }

        .icon-dot {
          font-size: 12rpx;
          color: #999;
        }
      }

      .node-text {
        font-size: 28rpx;
        color: #333;
        line-height: 1.4;
      }
    }

    .building-node {
      font-weight: 500;

      .node-text {
        font-size: 30rpx;
      }
    }

    .floor-node {
      padding-left: 56rpx;

      .node-text {
        font-size: 28rpx;
      }
    }

    .sub-floor-node {
      padding-left: 88rpx;

      .node-text {
        font-size: 26rpx;
      }
    }

    .children-nodes {
      width: 100%;
    }
  }
}

.right-content {
  flex: 1;
  background-color: #ffffff;
  padding: 20rpx;
  overflow-y: auto;

  .empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200rpx;

    .empty-text {
      font-size: 28rpx;
      color: #999;
    }
  }

  .device-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .device-item {
      border-radius: 12rpx;
      padding: 24rpx;
      transition: all 0.3s;

      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
      border: 2rpx solid #dee2e6;

      &.low-balance {
        background: linear-gradient(135deg, #fff3cd, #ffeaa7);
        border: 2rpx solid #f39c12;
      }

      .device-header {
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .label {
          font-size: 32rpx;
        }

        .value {
          font-size: 32rpx;
          font-weight: 600;
          color: #2c3e50;
        }
      }

      .device-details {
        margin-bottom: 20rpx;

        .detail-row {
          display: flex;
          align-items: center;
          margin-bottom: 12rpx;
          justify-content: space-between;

          &:last-child {
            margin-bottom: 0;
          }

          .detail-label {
            font-size: 28rpx;
            color: #666;
            margin-right: 12rpx;
          }

          .detail-value {
            font-size: 28rpx;
            color: #333;
            font-weight: 500;

            &.negative {
              color: #e74c3c;
            }
          }
        }
      }

      .device-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 8rpx;

        :deep(.wd-button) {
          padding: 0 56rpx;
        }
      }
    }
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8rpx;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4rpx;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
